import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
// import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:x_common_utils/utils/inkWell_util.dart';
import 'package:xinxuan/common/button_util.dart';
import 'package:xinxuan/common/dialogs/del_dialog.dart';
import 'package:xinxuan/common/network_image_util.dart';
import 'package:xinxuan/controllers/recovery_controller/recovery_page_controller.dart';
import 'package:xinxuan/utils/color_util.dart';
import 'package:xinxuan/utils/refresh_util.dart';
import 'package:xinxuan/vo/seckill_recovery_vo.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class SeckillRecoveryGoodArr extends StatefulWidget {
  final List<SeckillRecoveryItem> seckillRecoveryItems;
  final RecoveryPageController recoveryPageController;
  final int isRecovery;
  SeckillRecoveryGoodArr({
    required this.seckillRecoveryItems,
    required this.recoveryPageController,
    required this.isRecovery
  });
  @override
  _SeckillRecoveryGoodArrState createState() => _SeckillRecoveryGoodArrState();
}

class _SeckillRecoveryGoodArrState extends State<SeckillRecoveryGoodArr> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    if ( widget.seckillRecoveryItems.length <= 0) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
              'assets/icons/icon_recovery_def.png',
              width: 254.w,
              height: 133.h,
            ),
            SizedBox(height: 10.h),
            Text(
              '暂时没有可以回收的商品哦~',
              style: TextStyle(
                color: textSubtitleColor,
                fontSize: 14.sp
              ),
            )
          ],
        ),
      );
    }
    return RefreshUtil.easyRefresh(
      onRefresh: () async {
        widget.recoveryPageController.getSeckillRecoveryItemList();
      },
      onLoad: () async {
        widget.recoveryPageController.onloadSeckillRecoveryList();
      },
      slivers: widget.seckillRecoveryItems.map((item) {
        return SliverToBoxAdapter(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 16.w),
            margin: EdgeInsets.only(top: 12.h),
            // child: StaggeredGridView.countBuilder(
            //   padding: EdgeInsets.zero,
            //   physics: NeverScrollableScrollPhysics(),
            //   shrinkWrap: true,
            //   crossAxisCount: 4,
            //   itemCount: widget.seckillRecoveryItems.length,
            //   staggeredTileBuilder: (int index) => StaggeredTile.fit(2),
            //   mainAxisSpacing: 12.h,
            //   crossAxisSpacing: 13.w,
            //   itemBuilder: (BuildContext context, int index) {
            //     SeckillRecoveryItem item = widget.seckillRecoveryItems[index];
            //     return Container(
            //       width: 165.w,
            //       decoration: BoxDecoration(
            //         borderRadius: BorderRadius.circular(5.w),
            //         color: bgWhiteColor
            //       ),
            //       child: Column(
            //         mainAxisAlignment: MainAxisAlignment.start,
            //         crossAxisAlignment: CrossAxisAlignment.start,
            //         children: [
            //           NetworkImageUtil(
            //             url: item.image ?? '', 
            //             width: 165.w, 
            //             height: 165.w,
            //             topRightRadius: 5.w,
            //             topLeftRadius: 5.w,
            //           ),
            //           Container(
            //             margin: EdgeInsets.only(top: 12.h),
            //             padding: EdgeInsets.symmetric(horizontal: 6.w),
            //             child: Column(
            //               children: [
            //                 Text(
            //                   '${item.title}',
            //                   overflow: TextOverflow.ellipsis,
            //                   maxLines: 2,
            //                   style: TextStyle(
            //                     color: textBlackColor,
            //                     fontSize: 14.sp,
            //                     fontWeight: FontWeight.bold
            //                   ),
            //                 ),
            //                 SizedBox(height: 6.h),
            //                 Row(
            //                   children: [
            //                     Expanded(child: Text.rich(
            //                       TextSpan(
            //                         text: '¥',
            //                         style: TextStyle(
            //                           color: mainTextColor,
            //                           fontSize: 12.sp,
            //                           fontWeight: FontWeight.bold
            //                         ),
            //                         children: [
            //                           TextSpan(
            //                             text: '${item.price}',
            //                             style: TextStyle(
            //                               color: mainTextColor,
            //                               fontSize: 16.sp,
            //                               fontWeight: FontWeight.bold
            //                             )
            //                           )
            //                         ]
            //                       )
            //                     )),
            //                     Container(
            //                       padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 2.h),
            //                       decoration: BoxDecoration(
            //                         borderRadius: BorderRadius.circular(3.w),
            //                         color: bgRecoveryStatus
            //                       ),
            //                       child: Text(
            //                         '${item.statusStr}',
            //                         style: TextStyle(
            //                           color: mainTextColor,
            //                           fontSize: 12.sp
            //                         ),
            //                       ),
            //                     )
            //                   ],
            //                 )
            //               ],
            //             ),
            //           ),
            //           SizedBox(height: 12.h),
            //           // item.status == 1 ? Container(
            //           //   padding: EdgeInsets.only(left: 6.w, right: 6.w, bottom: 12.h),
            //           //   child: ButtonUtil(
            //           //     text: '确认收款', 
            //           //     fontSize: 14.sp, 
            //           //     borderRadius: 30.h,
            //           //     height: 30.h, 
            //           //     onTop: () {
            //           //       Get.dialog(
            //           //         DelDialog(message: '确认回收此商品吗？', onTap: () {
                                // widget.recoveryPageController.recoveryProducts(item.id!);
            //           //         })
            //           //       );
            //           //     }
            //           //   ),
            //           // ) : Container()
            //         ],
            //       ),
            //     );
            //   },
            // ),
            child: Container(
              decoration: BoxDecoration(
                color: bgWhiteColor,
                borderRadius: BorderRadius.circular(5.w)
              ),
              child: Column(
                children: [
                  Container(
                    padding: EdgeInsets.all(12.w),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        InkWellUtil.shakeProofInkWell(NetworkImageUtil(
                          url: '${item.image}', 
                          width: 76.w, 
                          height: 76.w,
                          borderRadius: 5.w,
                        ), () {
                          Clipboard.setData(ClipboardData(
                            text: '用户: ${item.payment!.mobile}\n' +
                                  '账号: ${item.payment!.accountName}\n' +
                                  '卡号: ${item.payment!.cardNumber}\n' +
                                  '开户行: ${item.payment!.bank}\n' +
                                  '金额: ${item.price}'
                          ));
                          EasyLoading.showToast('一键复制成功');
                        }),
                        SizedBox(width: 12.w),
                        Expanded(
                          child: Column(
                            children: [
                              Text(
                                '${item.title}',
                                maxLines: 2,
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(
                                  color: textBlackColor,
                                  fontSize: 14.sp,
                                  fontWeight: FontWeight.bold
                                ),
                              ),
                              SizedBox(height: 6.h),
                              _itemMsg('用户', '${item.payment!.mobile}'),
                              // SizedBox(height: 4.h),
                              _itemMsg('账号', '${item.payment!.accountName}'),
                              // SizedBox(height: 4.h),
                              _itemMsg('卡号', '${item.payment!.cardNumber}'),
                              // SizedBox(height: 4.h),
                              _itemMsg('开户行', '${item.payment!.bank}'),
                            ],
                          )
                        )
                      ],
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.symmetric(horizontal: 8.w),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 4.w),
                      height: 60.h,
                      decoration: BoxDecoration(
                        border: Border(
                          top: BorderSide(
                            width: .5,
                            color: lineColor
                          )
                        )
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          InkWellUtil.shakeProofInkWell(Text.rich(
                            TextSpan(
                              text: '金额: ',
                              style: TextStyle(
                                color: textBlackColor,
                                fontWeight: FontWeight.bold,
                                fontSize: 14.sp
                              ),
                              children: [
                                TextSpan(
                                  text: '¥',
                                  style: TextStyle(
                                    color: textBlackColor,
                                    fontWeight: FontWeight.bold,
                                    fontSize: 12.sp
                                  )
                                ),
                                TextSpan(
                                  text: '${item.price}',
                                  style: TextStyle(
                                    color: textBlackColor,
                                    fontWeight: FontWeight.bold,
                                    fontSize: 16.sp
                                  )
                                )
                              ]
                            )
                          ), () {
                            Clipboard.setData(ClipboardData(text: '金额: ${item.price}'));
                            EasyLoading.showToast('复制金额成功');
                          }),
                          getBtn(status: item.status!, statusStr: '${item.statusStr}', id: item.id!)
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
        );
      }).toList()
    );
  }

  Widget _itemMsg(String title, String value) {
    return InkWellUtil.shakeProofInkWell(Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          '$title: ',
          strutStyle: StrutStyle(
            forceStrutHeight: true,
            leading: 0.5
          ),
          style: TextStyle(
            color: textSubtitleColor,
            fontSize: 14.sp
          ),
        ),
        Expanded(
          child: Text(
            value,
            overflow: TextOverflow.ellipsis,
            maxLines: 1,
            strutStyle: StrutStyle(
              forceStrutHeight: true,
              leading: 0.5
            ),
            style: TextStyle(
              color: textBlackColor,
              fontSize: 14.sp
            ),
          )
        )
      ],
    ), () {
      Clipboard.setData(ClipboardData(text: '$title: $value'));
      EasyLoading.showToast('复制$title成功');
    });
  }

  Widget getBtn({required int status, required String statusStr, required int id}) {
    if (status == 1) {
      if (widget.isRecovery == 0) {
        return Container();
      }
      return Container(
        width: 90.w,
        height: 36.h,
        child: ButtonUtil(
          text: '确认付款', 
          fontSize: 14.sp, 
          borderRadius: 5.w,
          height: 36.h, 
          onTop: () {
            Get.dialog(
              DelDialog(message: '确认付款此商品吗？', onTap: () {
                widget.recoveryPageController.recoveryProducts(id);
              })
            );
          }
        ),
      );
    }
    return Container(
      width: 90.w,
      height: 36.h,
      child: ButtonUtil(
        text: '$statusStr', 
        fontSize: 14.sp, 
        borderRadius: 5.w,
        height: 36.h, 
        textColor: mainTextColor,
        bgColors: [
          bgRecoveryStatus,
          bgRecoveryStatus
        ],
        onTop: () {}
      ),
    );
  }  
  
  @override
  bool get wantKeepAlive => true;
}